<template>
  <div>通过watchEffect得到的数据:{{ data }}</div>
  <hr>

  <h2>watchEffect设计到多个依赖项：</h2>
  <h3>管理团队</h3>
  <ul>
    <li v-for="(member, index) in team.members" :key="member.id">
      {{ member.name }} - {{ member.role }} - {{ member.status }}
    </li>

    <button @click="updateLeaderStatus">切换领导的状态</button>
    <button @click="updateMemberStatus">切换成员的状态</button>
  </ul>
  <hr>

  <h2>回调的触发的时机</h2>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <div v-if="isShow" ref="divRef">
      <p>this is a test</p>
    </div>
    <p>上面的高度为：{{ height }}</p>
  </div>
  <hr>


  <h2>停止监听回调</h2>
  <button @click="a++">+1</button>
  <p>当前a的值为：{{ a }}</p>
  <p>{{ message }}</p>


</template>

<script setup>
  import { ref, watch, watchEffect, reactive } from 'vue'

  const todoId = ref(1)
  const data = ref(null)
  // watch(todoId, async () => {
  //   try {
  //     const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)
  //     data.value = await res.json()
  //   } catch (error) {
  //     throw new Error(error)
  //   }
  // }, {
  //   immediate: true
  // })

  //watchEffect,在回调函数中用到那个响应式的数据，数据就会成为依赖
  //会默认的执行一次
  watchEffect(async () => {
    try {
      const res = await fetch(`https://jsonplaceholder.typicode.com/todos/${todoId.value}`)
      data.value = await res.json()
    } catch (error) {
      // throw new Error(error)
    }
  })

  const team = reactive({
    members: [
      { id: 1, name: 'Alice', role: 'Leader', status: 'Active' },
      { id: 2, name: 'Bob', role: 'Member', status: 'Inactive' }
    ]
  })

  //切换领导的状态 =》取反
  function updateLeaderStatus() {
    const leader = team.members.find(member => member.role === 'Leader')
    leader.status = leader.status === 'Active' ? 'Inactive' : 'Active'
  }

  function updateMemberStatus() {
    const member = team.members.find(member => member.role === 'Member')
    member.status = member.status === 'Active' ? 'Inactive' : 'Active';
  }
  //添加一个监听器
  watchEffect(() => {
    //只监听leader
    const leader = team.members.find(member => member.role === 'Leader')
    //只是找到leader，没有主动访问 leader 的任何属性,不会触发watchEffect
    // console.log('我被触发了',leader);
    console.log('我被触发了', leader.status);
  })


  /* 回调的触发时机 */
  const isShow = ref(false)
  const height = ref(0)   //存储高度
  const divRef = ref(null) //存储元素

  watch(() => isShow.value, (newValue => {
    height.value = divRef.value ? divRef.value.offsetHeight : 0;
    //获取高度，将高度给height
    console.log(`当前获取的高度为：${height.value}`)
  }), { flush: 'post' })


  /* 要手动的停止侦听器，就和 setTimeout 或者 setInterval 类似，调用一下返回的函数即可。 */
  const a = ref(1) // 计数器
  const message = ref('') // 消息
  // 假设我们期望 a 的值到达一定的值之后，停止侦听
  const unwatch = watch(a, (newValue) => {
    if (newValue > 5) {
      unwatch()
    }
    message.value = `当前的a值为${newValue}`
  }, { immediate: true })



</script>

<style scoped></style>
